<script setup >
import {inject, ref} from "vue";
import favicon from "@/assets/favicon.ico";
import {useUserStore} from "@/store/modules/user";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
const userStore = useUserStore();
const router = useRouter();
const reload = inject("reload");
import {useDialogStore} from "@/store/index/dialog";
const dialogStore = useDialogStore();
let drawer =  ref(false);
const env = import.meta.env;

function outLogin(){
  userStore.logOut().then(()=>{
    ElMessage.success("退出成功!")
      });
  reload();
}
const changeDrawer = () =>  drawer.value = !drawer.value;

console.log()
</script>

<template>
  <el-header class="header">
    <div class="container user-select-none" >
      <nav class="navbar navbar-expand-lg">
        <div class="container-fluid row ">
          <div class="col-6" >
            <button @click="changeDrawer" class="navbar-toggler" type="button" data-bs-target="#navbarSupportedContent">
              <span class="navbar-toggler-icon" style="font-size: 12px; border: none;" ></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="">
                  <a class="navbar-brand" href="/index"><el-image :size="32" :src="favicon" class="align-items-center"/></a>
                </li>
                <li class="">
                 <a class="nav-link active" aria-current="page" href="#">关于</a>
                </li>
              </ul>
            </div>
          </div>
          <div  class="col-6">
            <div class="grid-content">
              <div class="ep-bg-purple-light">
                <div v-if="userStore.status" style="display: flex;justify-content: flex-end;">
                  <el-dropdown>
                    <div class="el-dropdown-link" style="display: inline-flex" >
                      <div class="m-1 "  >
                        <div class="m-1 float-right">
                          {{ userStore.nickName }}
                        </div>
                        <div class="m-1" >
                          {{ userStore.email}}
                        </div>
                      </div>

                      <div class="">
                        <el-avatar shape="square" :src="userStore.avatar"  size="default" />
                      </div>
                    </div>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item v-if="userStore.isAdmin" ><el-icon><Operation /></el-icon><a class="navbar-brand"  :href="'http://'+env.VITE_APP_APT_IP+':'+env.VITE_ADMIN_PORT" >控制台</a> </el-dropdown-item>
                        <el-dropdown-item @click="$router.push('/index/personal')"><el-icon><Avatar/></el-icon>个人中心</el-dropdown-item>
                        <el-dropdown-item @click="outLogin" ><el-icon><SwitchButton /></el-icon>退出登录</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
                <div v-else style="display: flex;justify-content: flex-end;" >
                  <strong class="small" @click="dialogStore.openRegisterDialog()" style="margin-right: 5px" >注册</strong>
                  <strong class="small" @click="dialogStore.openLoginDialog()" >登录</strong>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>

    <!-- 抽屉 -->
    <el-drawer v-model="drawer"   direction="ltr"  :with-header="false">
      <span> <a href="/index"  style="color: #343a40; text-decoration: none" > 回到主页</a> </span>
    </el-drawer>

  </el-header>
</template>

<style scoped>
.header {
  position: fixed;
  height: 52px;
  width: 100%;
  z-index: 10;
  background-color: #ffffff;
  box-shadow: 0 5px 40px #113a5d1a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: calc(100vw - 100%);
}
</style>

<!--公共css类-->
<style scoped>
.font-12 {
  font-size: 12px;
  font-weight: 700;
  line-height: 40px;
  text-align: right;
}
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.el-row:last-child {
  margin-bottom: 0;
}
.navbar-nav {
  font-size: 13px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
li {
  padding-left: 10px;
  padding-right: 10px;
}
.grid-content {
  border-radius: 4px;
}
</style>
